<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>echarts-异步加载数据</title>
    <script type="text/javascript" src="../../../node_modules/echarts/dist/echarts.js"></script>
    <style>
        #myChart {
            width: 240px;
            height: 270px;
            border: none;
        }
    </style>
</head>

<body>
    <div id="myChart"></div>
    <!--  -->
    <script type="text/javascript">
        var chart = document.getElementById('myChart');
        // 初始化echarts对象
        var myChart = echarts.init(chart);

        const NUM = 240

        var series = [{
            name: 'x',
            type: 'line',
            symbol: 'none',
            data: new Array(NUM).fill(0)
        }]

        // myChart.hideLoading();
        // option 里面的内容基本涵盖你要画的图表的所有内容
        // 定义样式和数据
        var option = {
            title: {
                text: '麦克风',
                left: 'center'
            },
            // 给echarts图设置背景色
            backgroundColor: '#FBFBFB',                  // -----------> // 给echarts图设置背景色   
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['x'],
                orient: 'vertical',
                left: 'right',
                // aline: 'right',
                show: false,
            },
            grid: {
                left: 'left',
                right: '0',
                bottom: '0'
            },

            calculable: true,

            xAxis: [{
                type: 'category',
                // boundaryGap: false,
                data: new Array(NUM).fill(' '),
                show: false
            }],
            yAxis: [{
                type: 'value',
                min: -1.0, // 设置y轴刻度的最小值
                max: 1.0,  // 设置y轴刻度的最大值
                position: 'left',
                show: false
            }],
            series: series
        };
        myChart.setOption(option);

        const audioContext = new (window.AudioContext || window.webkitAudioContext)()
        const scriptProcessor = audioContext.createScriptProcessor(512, 1, 1)

        scriptProcessor.connect(audioContext.destination)

        var updateData = () => {
            setTimeout(() => {
                myChart.setOption(option);
                // console.log(option.series[0].data)
                updateData()
            }, 20)
        }

        myChart.setOption(option);
        scriptProcessor.addEventListener('audioprocess', function (event) {
            // console.log(event)
            var data = event.inputBuffer.getChannelData(0)
            // option.series[0].data = Array.prototype.slice.call(data);

            option.series[0].data.shift()
            option.series[0].data.push(Math.max(...data))
            // option.series[0].data.push(data[0])

            // console.log(data)
        })

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
        navigator.getUserMedia({ audio: true }, function (stream) {
            console.log(stream)
            audioContext.resume().then(() => {
                audioContext.createMediaStreamSource(stream).connect(scriptProcessor)
                updateData()
            })
            console.log(scriptProcessor)
        }, function (err) {
            console.log(err)
        })

    </script>
</body>

</html>